<template>

	<html2canva-pdf ref="html2pdf">
		<view>
			<view class="report-time">
				<text>截止到{{reportTime}}数据报告</text>
			</view>

			<view class="content">

				<!-- 文章 -->
				<view class="">
					<view class="report-title">
						<text>{{reportTitle}}</text>
					</view>
					<view class="report-article">
						<text>市人民政府教育督导室、教育局，市直属学校(园)∶按照{{ name }}安排，{{ begintime }}月，各区(市、县)、市直属学校(园)开展”{{ name }}”专项自查督查。
							通过听取汇报、查阅资料、实地查看、个别访谈、手机APP采集数据等形式，检查了相关工作开展情况，
							并对上月常规视导中存在问题的整改情况进行了回访。现将检查情况通报如下:此次共计检查学校{{ allschoolnum }}所，其中市直属学校(园){{ cityschoolnum}}所，区(市、县)学校(园)
							{{nocityschoolnum}}所，
							共查出问题{{totalmatter}}个，涉及学校(园){{schooltotal}}所，存在问题学校比例为。
							其中，“{{MaxMatter}}”问题存在最多，占比{{ bfbMAX}}。“{{MinMatter}}"问题存在最少，占比{{bfbMIN}}。
						</text>
					</view>
				</view>

				<!-- 饼图 -->
				<view class="content-pie">
					<l-echart ref="firstEcharts"></l-echart>
					<view class="">问题指标占比情况</view>
				</view>

				<view class="" style="height: 15px; width: 100%;">

				</view>

				<!-- 学校指标情况 -->
				<view class="index-table">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100" align="center">区县名称</uni-th>
							<uni-th width="100" align="center">总指标</uni-th>
							<uni-th width="100" align="center">问题指标</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td align="center">贵阳市</uni-td>
							<uni-td align="center">{{ totalnum }}</uni-td>
							<uni-td align="center">{{ schooltotal }}</uni-td>
						</uni-tr>
					</uni-table>
					<view class="">学校指标情况</view>
				</view>

				<view class="" style="height: 15px; width: 100%;">

				</view>

				<!-- 指标不合格量 -->
				<view class="">
					<l-echart ref="twoEcharts"></l-echart>
				</view>

				<!-- 指标合格量 -->
				<view class="">
					<l-echart ref="threeEcharts"></l-echart>
				</view>

				<!-- 问题指标情况 -->
				<view class="questions-index">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100" align="center">区县名称</uni-th>
							<uni-th width="100" align="center">总指标</uni-th>
							<uni-th width="100" align="center">问题指标</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in report" :key="index">
							<uni-td align="center">{{ item.NAME }}</uni-td>
							<uni-td align="center">{{ totalnum }}</uni-td>
							<uni-td align="center">{{ item.resultNum }}</uni-td>
						</uni-tr>
					</uni-table>
					<view class="">问题指标情况</view>
				</view>

				<view class="" style="height: 15px; width: 100%;">

				</view>

				<view class="">
					<uni-table ref="table" border stripe emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="100" align="center">指标名称</uni-th>
							<uni-th width="100" align="center">不合格累计数</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in activitylist" :key="index">
							<uni-td align="center">{{ item.NAME }}</uni-td>
							<uni-td align="center">{{ item.matternum }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>

			<!-- 导出按钮 -->
			<view class="" style="width: 80px; position: fixed; top: 0; right: 0;">
				<button type="default">导出</button>
			</view>
		</view>
	</html2canva-pdf>

</template>

<script>
	import {
		cityCommentReport,
		cityZoneMatter,
		cityMattetCount
	} from "@/api/supervise/work.js"
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		data() {
			return {
				name: "",
				begintime: "",
				reportTime: "",
				reportTitle: "市督导自查报告",
				totalnum: "",
				totalSchoolnum: "",
				schooltotal: "",
				cityschoolnum: "",
				nocityschoolnum: 0,
				allschoolnum: 0,
				begintime: "",
				MaxMatter: "",
				MinMatter: "",
				bfbMAX: "",
				bfbMIN: "",
				totalmatter: "",
				report: [],
				activitylist: [],
				// 指定图表的配置项和数据
				option1: {
					title: {
						text: '学校指标占比情况',
						x: 'center',
						y: 'center',
						textStyle: {
							fontWeight: 'normal',
							color: 'black',
							fontSize: '16'
						}
					},
					color: ['rgba(251, 217, 92, 1.0)'],
					legend: {
						show: true,
						itemGap: 12,
						data: ['其他指标', '不合格指标']
					},

					series: [{
						name: 'Line 1',
						type: 'pie',
						clockWise: true,
						radius: ['50%', '66%'],
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						hoverAnimation: false,
						data: [{
							value: "",
							name: '其他指标',
							label: {
								show: true,
								position: 'outside',
								formatter: '{a|{b}：{d}%}',
								rich: {}
							},
							itemStyle: {
								normal: {
									color: { // 完成的圆环的颜色
										colorStops: [{
											offset: 0,
											color: '#7c390d' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#367bec' // 100% 处的颜色
										}]
									},
									label: {
										show: false
									},
									labelLine: {
										show: false
									}
								}
							}
						}, {
							name: '不合格指标',
							value: "",
							label: {
								show: true,
								position: 'outside',
								formatter: '{a|{b}：{d}%}',
								rich: {}
							},
						}]
					}]
				},
				option2: {
					xAxis: {
						type: 'category',
						data: [],
						"axisLabel": {
							rotate: 45,
							interval: 0
						}

					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [],
						type: 'bar'
					}]
				}
			}
		},
		methods: {
			getReportTime() {
				let date = new Date()
				let year = date.getFullYear() //获取完整的年份(4位)
				let month = date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
				let strDate = date.getDate() // 获取当前日(1-31)
				if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
				if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
				return year + "年" + month + "月" + strDate + "日"
			},
			getCityCommentReport(activityId) {
				cityCommentReport(activityId).then(res => {
					console.log(res)
					this.totalnum = res.totalnum
					this.schooltotal = res.schooltotal
					this.cityschoolnum = res.cityschoolnum
					this.allschoolnum = res.allschoolnum
					this.totalSchoolnum = res.totalSchoolnum
					this.nocityschoolnum = this.allschoolnum - this.cityschoolnum
					this.begintime = res.begintime.slice(5, 7)
					this.totalmatter = this.uniqueFunc(res.matter, "matter").length
					this.option1.series[0].data[0].value = (this.totalnum - this.schooltotal) /
						this.totalnum
					this.option1.series[0].data[1].value = this.schooltotal / this.totalnum

					this.inintFirstEcharts(this.option1)
				})
			},
			getCityZoneMatter(activityId) {
				cityZoneMatter(activityId).then(res => {
					let report = this.delSameObjValue(res.report, 'resultNum', ['code'], ['countImprove'])
					this.report = report
					console.log(report)

					for (let i = 0; i < report.length; i++) {
						this.option2.xAxis.data.push(report[i].NAME)
						this.option2.series[0].data.push(report[i].resultNum)
					}
					this.inintTwoEcharts(this.option2)
					this.inintThreeEcharts(this.option2)
				})
			},
			/*  delSameObjValue 数组对象相同值相加去重
			    arr 需要处理的数组
			    resultNum 最终计算结果的键名
			    keyName 用于计算判断的键名 
			    keyValue 用于计算结果的键名 --> 对应的键值为number类型*/
			delSameObjValue(arr, resultNum, keyName, keyValue) {
				const warp = new Map();
				arr.forEach(i => {
					let str = keyName.map(v => i[v]).join('_');
					i[resultNum] = keyValue.reduce((p, c) => p += i[c], 0);
					warp.has(str) ? warp.get(str)[resultNum] += i[resultNum] : warp.set(str, i);
				});
				return Array.from(warp).map(([, v]) => v);
			},
			uniqueFunc(arr, uniId) {
				const res = new Map();
				return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
			},
			getCityMattetCount(activityId) {
				cityMattetCount(activityId).then(res => {

					let activitylist = res.activitylist
					let report = res.report
					for (let i = 0; i < activitylist.length; i++) {
						activitylist[i].matternum = 0;
						for (let j = 0; j < report.length; j++) {
							if (activitylist[i].id === report[j].targetId) {
								activitylist[i].matternum += report[j].matternum
							}
						}
					}
					console.log(activitylist)
					this.MaxMatter = activitylist[0].NAME
					this.MinMatter = activitylist[activitylist.length - 1].NAME

					let total = 0
					for (let k = 0; k < activitylist.length; k++) {
						total += activitylist[k].matternum

					}
					this.bfbMAX = (activitylist[0].matternum / total).toFixed(2) + '%'
					this.bfbMIN = (activitylist[activitylist.length - 1].matternum / total).toFixed(2) + "%"


					this.activitylist = activitylist

				})
			},
			inintFirstEcharts(option) {
				this.$refs.firstEcharts.clear();
				this.$refs.firstEcharts.showLoading();
				this.$refs.firstEcharts.init(echarts, chart => {
					chart.setOption(option);
					chart.hideLoading();
				});
			},
			inintTwoEcharts(option) {
				this.$refs.twoEcharts.clear();
				this.$refs.twoEcharts.showLoading();
				this.$refs.twoEcharts.init(echarts, chart => {
					chart.setOption(option);
					chart.hideLoading();
				});
			},
			inintThreeEcharts(option) {
				this.$refs.threeEcharts.clear();
				this.$refs.threeEcharts.showLoading();
				this.$refs.threeEcharts.init(echarts, chart => {
					chart.setOption(option);
					chart.hideLoading();
				});
			},

		},
		onLoad(option) {
			this.name = option.name
			this.reportTime = this.getReportTime()
			this.getCityCommentReport(option.id)
			this.getCityZoneMatter(option.id)
			this.getCityMattetCount(option.id)
		}
	}
</script>


<style lang="scss" scoped>
	.report-time {
		height: 5vh;
		line-height: 5vh;
		padding: 0 10px;
	}

	.report-title {
		font-size: 20px;
		text-align: center;
		width: 100vw;
	}

	.report-article {
		margin: 20px 10px;
	}

	.content-pie {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.index-table {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.questions-index {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.echarts {
		margin-top: 20px;
		width: 100vw;
		height: 300px;
	}
</style>